<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Quick Start Guide Example</title>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../../vendor/leaflet.css" />
  <link rel="stylesheet" href="../../editor/stylesheets/slides.css" />

  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <!--[if lte IE 8]>
      <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
  <![endif]-->
  <style type="text/css">
  #mushing-vid {
    position: absolute;
    width: 400px; height: 280px;
    left: 50%;
    top: 20%;
    margin-left: -200px;
    z-index: 1000;
  }

  .hidden {
    display: none;
  }
  </style>
</head>
<body>
  <div id="map" style="width: 100%; height: 100%"></div>
  <div id="slides_container">
    <div id="dots"></div>
    <div id="slides">
      <div class='slide' style='diplay:none'>
          <h1> A serum run to Nome</h1>
          <p>
            A diphtheria epidemic threatened Nome, especially the Alaska Native children who had no immunity to the "white man's disease", and the nearest quantity of antitoxin was found to be in Anchorage. On January 27, mushers sped from Nenana to Nome to deliver the package and save the lives of the infected village.
          </p>
      </div>
      <div class='slide' style='diplay:none'>
          <h1> A race for good </h1>
          <p>
            In the 1925 run, 100 dogs relayed the package 674 miles (1,085 km) from Nenana to Nome. The dogs ran in relays, with no dog running over 100 miles (160 km). The objective was delivering the package.  On February 2 at 5:30 a.m., just five and a half days later, the package arrived in Nome safely. 
          </p>
      </div>
      <div class='slide' style='diplay:none'>
          <h1>A race is born...</h1>
          <p>
            In 1973, almost 50 years later, the modern Iditarod was born. The first race attracted a field of 34 mushers, 22 of whom completed the 1000 mile route.
          </p>
      </div>
      <div class='slide' style='diplay:none'>
          <h1> Mushing Dalzell Gorge </h1>
          <p>
            This is the famous and feared stretch of trail known as the Dalzell Gorge. In two miles the trail drops hundreds of feet as it jumps back and forth across Dalzell Creek on narrow ice and snow bridges that span open but shallow running water...
          </p>
      </div>
      <div class='slide' style='diplay:none'>
          <h1> Mushing Dalzell Gorge </h1>
      </div>
      <div class='slide' style='diplay:none'>
          <h1> The finish </h1>
          <p>
            With over 1000 miles covered, through some of the most rugged winter terrain in the world, the dogs pull their sleds into Nome, Alaska
          </p>
      </div>
    </div>
    <ul id='navButtons'>
      <li><a class='prev'></a></li>
      <li><a class='next'></a></li>
    </ul>
  </div>
  <div id="progress"></div>
  <div id="credits">
    <span class="title"> The great race</span>
    <span class="author">By Vizzuality using <a href="#">odyssey.js</a><span>
  </div>
  <div id="mushing-vid" class="hidden">
      <iframe width="400" height="280" src="//www.youtube.com/embed/jjyItL68iqU?start=24&rel=0&autoplay=1" frameborder="0" allowfullscreen volume="0"></iframe>
  </div>
  <audio src="http://www.loc.gov/folklife/sampler/audio/AK_T5.mp3" preload="auto" style="display: none" id="paddle-song"></audio>
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <script src="../../dist/odyssey.js" charset="UTF-8"></script>
  <script>

  function click(el) {
    var element = O.Core.getElement(el);
    var t = O.Trigger();
    // TODO: clean properly
    element.onclick = function() {
      t.trigger();
    }
    return t;
  }

  var defaultIcon = L.icon({
      iconUrl: '../icons/circle-stroked-24.png'
  });

  // create a map
  var map = new L.Map('map', {
    zoomControl: false,
    center: [63.1455, -163.5208],
    zoom: 2
  });
// https://a.tiles.mapbox.com/v3//page.html?secure=1#3/35.25/-51.50

  L.tileLayer('http://{s}.tiles.mapbox.com/v3/cartodb.h0cmgfh8/{z}/{x}/{y}.png').addTo(map).setOpacity(0.9);

  var iditarod_route;

  // create a sequential trigger
  var seq = O.Triggers.Sequential();

  // init a story 
  var story = O.Story();

  // enanle keys to move
  O.Triggers.Keys().left().then(seq.prev, seq)
  O.Triggers.Keys().right().then(seq.next, seq)

  click(document.getElementsByClassName('next')).then(seq.next, seq)
  click(document.getElementsByClassName('prev')).then(seq.prev, seq)

  var slides = O.Actions.Slides('slides');
  var progress = O.UI.DotProgress('dots').count(0);

  function main(){
    var audio = O.Audio(document.getElementById("paddle-song"));
    var vid = O.CSS($("#mushing-vid"));

    cartodb.createLayer(map, 'http://andrew.cartodb.com/api/v2/viz/6fe15eb8-b83b-11e3-b052-0edbca4b5057/viz.json')
          .done(function(layer) {
            iditarod_route = layer;
            // O.iditarod_route= layer.getSubLayer(0).show(),
            O.iditarod_route =layer.getSubLayer(1).hide();

      var story = O.Story()
        .addState(
          // Full picture
          seq.step(0),
          O.Step(
            slides.activate(0),
            audio.setCurrentTime(30),
            audio.play(),
            O.Sleep(6000),
            map.actions.setZoom(6, {animate: true, duration: 2}),
            progress.activate(0)
          )
        )
        .addState(
          // Anchorage Alaska: historical start
          seq.step(1),
          O.Step(
            audio.pause(),
            // O.actions.Audio.pause(mp),
            slides.activate(1),
            map.actions.panTo([61.725235, -150.166247], {animate: false}),
            O.Sleep(500),
            map.actions.setZoom(7, {animate: false}),
            O.Sleep(500),
            map.actions.panTo([64.264096,-155.511958], {animate: true, duration: 4}),
            O.Sleep(4),
            map.actions.panTo([64.499902,-165.41355], {animate: true, duration: 4}),
            O.Sleep(4000),
            map.actions.setZoom(5)
          )
        )
        .addState(
          // Anchorage Alaska: historical start
          seq.step(2),
          O.Parallel(
            slides.activate(2),
            map.actions.panTo([61.725235, -150.166247], {animate: false}),
            O.Sleep(1),
            map.actions.setZoom(10)
          )
        )
        .addState(
          // Mushing Dalzell Gorge
          seq.step(3),
          O.Parallel(
            slides.activate(3),
            map.actions.setZoom(11, {animate: false}),
            O.Sleep(500),
            map.actions.panTo([62.08711, -152.7252], {animate: false}),
            // O.Sleep(20),
            // map.actions.panTo([62.29441, -153.3757], {animate: true, duration:10}),
            O.Sleep(5000)
          )
        )
        .addState(
          // Mushing Dalzell Gorge
          seq.step(4),
          O.Parallel(
            slides.activate(4),
            vid.toggleClass('hidden'),
            map.actions.setZoom(11),
            O.Sleep(500),
            map.actions.panTo([62.29441,-153.3757], {animate: true, duration:15}),
            O.Sleep(3000)
          )
        )
        .addState(
          // The Finish
          seq.step(5),
          O.Step(
            vid.toggleClass('hidden'),
              slides.activate(5),
              map.actions.setZoom(6),
              O.Sleep(3000),
              map.actions.panTo([64.5003, -165.4093], {animate: true, duration: 3}),
              O.Sleep(3000),
              map.actions.setZoom(10)
          )
        )

      story.go(0);
    }).addTo(map)
  }
  window.onload = main;

                  
  </script>
</body>
</html>
